<template>
  <div class="continer">
    <div class="box" v-for="item in records" :key="item.id">
      <img class="img" :src="ip + item.imgUrl" alt="" />
      <p class="time">{{ item.createTime }}</p>
      <p class="name">{{ item.userName }}</p>
      <p class="job">{{ item.job }}</p>
    </div>
  </div>
</template>

<script>
import { GetAllName, GetIP } from "../api/index";
export default {
  name: "OutOfOrderWall",
  data() {
    return {
      now: 1, //页数
      size: 10, //每页的数据量
      records: [],
      ip: GetIP,
      records: [],
    };
  },
  methods: {
    getAllShowName() {
      GetAllName({
        now: this.now,
        size: this.size,
      }).then((res) => {
        if (res.status == 200) {
          this.records = res.data.data.records;
        } else {
          this.$message.error("没有数据");
        }
      });
    },
  },
  created() {
    this.getAllShowName();
  },
};
</script>

<style scoped>
.continer {
  background-color: #eb7072;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}
.box {
  width: 300px;
  height: 400px;
  background-color: white;
  border-radius: 5%;
  margin-top: 30px;
  margin-right: 25px;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: absolute;
  margin-top: 20px;
}

.box:hover {
  z-index: 2;
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  box-shadow: -10px 10px 20px #000000;
  -moz-box-shadow: -10px 10px 20px #000000;
  -webkit-box-shadow: -10px 10px 20px #000000;
  cursor: pointer;
}
.img {
  width: 280px;
  height: 220px;
  margin: 10px;
  text-align: center;
  border-radius: 5%;
}
.box:nth-child(2n) {
  left: 100px;
  top: 50px;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  transform: rotate(20deg);
}
.box:nth-child(2n + 1) {
  left: 700px;
  top: 80px;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  transform: rotate(20deg);
}
.box:nth-child(2n + 2) {
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.box:nth-child(2n + 3) {
  bottom: 0;
  left: 400px;
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
.box:nth-child(2n + 4) {
  bottom: 0;
  left: 1000px;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  transform: rotate(50deg);
}
.box:nth-child(2n + 5) {
  top: 400px;
  left: 0px;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  transform: rotate(50deg);
}
.box:nth-child(4n + 6) {
  top: 400px;
  left: 300px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.box:nth-child(4n + 7) {
  top: 400px;
  left: 600px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.box:nth-child(4n + 8) {
  top: 400px;
  left: 900px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
}
.time {
  margin-left: 10px;
  margin-right: 10px;
  color: #eb7072;
}
.name {
  margin-left: 10px;
  margin-right: 10px;
  color: #eb7072;
}
.job {
  margin-left: 10px;
  margin-right: 10px;
  color: #eb7072;
}
</style>